<template>
  <div class="setting-page w-1100">
    <div class="breadcrumb">
      <p @click="$router.push(`/user/${userInfo.id}`)">
        <i class="ri-arrow-left-s-line"></i>返回个人主页
      </p>
    </div>
    <div class="setting-modal">
      <div class="left-menu">
        <ul>
          <li>
            <nuxt-link to="/setting/profile"><i class="ri-profile-line"></i>个人资料</nuxt-link>
          </li>
          <li>
            <nuxt-link to="/setting/resume"><i class="ri-contacts-book-2-line"></i>个人简历</nuxt-link>
          </li>
          <li>
            <nuxt-link to="/setting/account"><i class="ri-user-settings-line"></i>账号设置</nuxt-link>
          </li>
          <li>
            <nuxt-link to="/setting/message"><i class="ri-notification-3-line"></i>消息设置</nuxt-link>
          </li>
          <li>
            <nuxt-link to="/setting/login-record"><i class="ri-logout-box-r-line"></i>登录记录</nuxt-link>
          </li>
        </ul>
      </div>
      <div class="right-content">
        <nuxt-child></nuxt-child>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'SettingPage',
  layout: 'BaseLayout',
  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo
    })
  }
}
</script>

<style scoped lang="less">
.setting-page {
  padding-top: 12px;
  .breadcrumb {
    background: #fff;
    padding: 0 12px;
    line-height: 42px;
    border-radius: 4px;
    p {
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      font-size: 13px;
      &:hover {
        color: var(--hover-primary-color);
      }
      i {
        font-size: 18px;
      }
    }
  }
  .setting-modal {
    display: flex;
    margin-top: 12px;
    align-items: flex-start;
    .left-menu {
      background: #fff;
      width: 230px;
      border-radius: 4px;
      min-height: 626px;
      position: sticky;
      top: 68px;
      ul {
        list-style: none;
        padding: 8px 0;
        li {
          height: 42px;
          line-height: 42px;
          padding: 0 8px;
          margin-bottom: 6px;
          a {
            color: #4e5969;
            display: block;
            padding: 0 20px;
            i {
              margin-right: 10px;
              font-size: 16px;
            }
            &.nuxt-link-exact-active {
              background: rgba(25, 197, 74, 0.10196);
              color: var(--primary-color);
              border-radius: 4px;
            }
          }
        }
      }
    }
    .right-content {
      background: #fff;
      flex: 1;
      width: 0;
      margin-left: 12px;
      min-height: 626px;
      border-radius: 4px;
    }
  }
}
</style>
